<template>
  <div class="footer">
    <div class="form wow" style="visibility: visible">
      <h2>
        已有
        <span><numberScroll :value="536"></numberScroll></span>
        人获取报价
      </h2>
      <ul>
        <li>
          <i
            ><img
            src="/src/assets/img/baojia1.png"
              alt=""
          /></i>
          <input type="text" placeholder="输入您的姓名" value="" />
        </li>
        <li>
          <i
            ><img
            src="/src/assets/img/baojia2.png"
              alt=""
          /></i>
          <input type="text" maxlength="11" placeholder="输入您的联系电话" value="" />
        </li>
        <li>
          <i
            ><img
            src="/src/assets/img/pingfang.png"
              alt=""
          /></i>
          <input type="text" placeholder="输入您的装修面积" value="" />
        </li>
        <li>免费获取报价</li>
      </ul>
    </div>
    <div class="box wow" style="visibility: visible">
      <ul>
        <li>
          <div>
            <i><img src="/src/assets/img/footer_phone.png" alt="" /></i>
            <span>24小时热线咨询</span>
          </div>
          <p>133-5000-6370</p>
        </li>
        <li>
          <div>
            <i><img src="/src/assets/img/shouhou.png" alt="" /></i>
            <span>售后电话</span>
          </div>
          <p>133-5000-6370</p>
        </li>
        <li>
          <div>
            <i><img src="/src/assets/img/address.png" alt="" /></i>
            <span>地址</span>
          </div>
          <p>绵阳市宜家美国家家居五楼</p>
        </li>
      </ul>
    </div>
    <div class="code wow" style="visibility: visible">
      <img src="/src/assets/img/erweima.jpg" alt="" />
      <div>
        <p>关注雅阁汇了解</p>
        <h1>最新装饰风格</h1>
      </div>
    </div>
    <div class="copy wow" style="visibility: visible">
      <p>
        技术支持：兴信网络科技 后台管理
      </p>
      <p>
        备案号：
        <span
          ><a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank"
            >蜀ICP备13008991 号-1
          </a></span
        >
      </p>
      <p>
        技术支持：
        <a href="#" target="_blank" class="jszc">兴信网络科技</a>
      </p>
    </div>
    <div class="tab-bar">
      <div class="active">
        <div>
          <img
            src=""
            alt=""
          />
          首页
        </div>
      </div>
      <div>
        <div @click="showbaojia = true">
          <img
            src=""
            alt=""
          />
          获取报价
        </div>
      </div>
      <div>
        <div @click="phone">
          <img
            src=""
            alt=""
          />
          电话咨询
        </div>
      </div>
    </div>

  <BaoJia :showbaojia="showbaojia" @show-event="closeDialog" />
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import CommonApi from '@/api/common';
onMounted(() => {
  CommonApi.getwebconfig().then((e) => {
    console.log(e)
  })
})
const showbaojia = ref(false)
const closeDialog = (e)=>{
  showbaojia.value = e
}
const phone = ()=>{
  const phoneLink = `tel:13350006370`;
  window.location.href = phoneLink;
}
</script>
<style scoped>
.footer {
  padding-bottom: 2.15rem;
  background: #fff;
  margin-top: -1px;
}

.footer .form {
  height: 7.3rem;
  background: url(/src/assets/img/footer_bj.jpg) no-repeat;
  background-size: cover;
  padding: 0.82rem 0.58rem 0.97rem;
  opacity: 0;
  animation: slide-down-in 1s, fade-in 1s;
  animation-fill-mode: forwards;
}

.footer .form h2 {
  font-size: 0.56rem;
  font-weight: 400;
  color: #fff;
  margin-bottom: 0.63rem;
}

.footer .form h2 span {
  color: #dd292c;
  font-family: Gilroy-Bold;
  display: inline-block;
}

.footer .form ul li {
  height: 0.8rem;
  background: #fff;
  border-radius: 0.2rem;
  margin-bottom: 0.1rem;
  display: flex;
  position: relative;
  align-items: center;
}

.footer .form ul li input {
  flex: 1;
  font-size: 0.24rem;
  font-weight: 700;
  color: #000;
  border: none;
  font-family: Microsoft Yahei, -apple-system, PingFang SC, Helvetica Neue, STHeiti, Tahoma, Simsun,
    sans-serif;
}

.footer .form ul li input::-moz-placeholder {
  font-family: Microsoft Yahei, -apple-system, PingFang SC, Helvetica Neue, STHeiti, Tahoma, Simsun,
    sans-serif;
  font-size: 0.24rem;
  font-weight: 400;
  color: #adadad;
}

.footer .form ul li input:-ms-input-placeholder {
  font-family: Microsoft Yahei, -apple-system, PingFang SC, Helvetica Neue, STHeiti, Tahoma, Simsun,
    sans-serif;
  font-size: 0.24rem;
  font-weight: 400;
  color: #adadad;
}

.footer .form ul li input::placeholder {
  font-family: Microsoft Yahei, -apple-system, PingFang SC, Helvetica Neue, STHeiti, Tahoma, Simsun,
    sans-serif;
  font-size: 0.24rem;
  font-weight: 400;
  color: #adadad;
}

.footer .form ul li i {
  width: 0.28rem;
  height: 0.28rem;
  margin: 0 0.2rem 0 0.3rem;
}

.footer .form ul li i img {
  display: block;
  max-width: 100%;
}

.footer .form ul li:last-child {
  background: #dd292c;
  justify-content: center;
  font-size: 0.26rem;
  font-weight: 400;
  color: #fff;
  line-height: 0.8rem;
  margin-top: 0.2rem;
  cursor: pointer;
}

.footer .form p {
  margin-top: 0.54rem;
  text-align: center;
  font-size: 0.22rem;
  font-weight: 400;
  color: #858585;
}

.footer .form p span {
  color: #dd292c;
}

.footer .box {
  padding: 1.38rem 0 0 0.6rem;
  opacity: 0;
  -webkit-animation: slide-down-in 1s, fade-in 1s;
  animation: slide-down-in 1s, fade-in 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.footer .box ul {
  flex-wrap: wrap;
  display: flex;
}

.footer .box ul li {
  margin-bottom: 0.45rem;
}

.footer .box ul li:first-child {
  margin-right: 0.7rem;
}

.footer .box ul li:first-child img {
  width: 0.42rem;
}

.footer .box ul li:nth-child(2) img {
  width: 0.48rem;
}

.footer .box ul li:nth-child(3) img {
  width: 0.35rem;
}

.footer .box ul li:nth-child(3) p {
  font-weight: 400;
}

.footer .box ul li div {
  display: flex;
  align-items: center;
  font-size: 0.26rem;
  font-family: Gilroy-Regular;
  font-weight: 400;
  color: #999;
}

.footer .box ul li div i {
  margin-right: 0.2rem;
  height: 0.44rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer .box ul li p {
  font-size: 0.36rem;
  font-family: Gilroy-Bold;
  font-weight: 700;
  color: #000;
  margin-top: 0.16rem;
}

.footer .code {
  display: flex;
  align-items: center;
  padding-left: 0.58rem;
  margin-bottom: 0.58rem;
  opacity: 0;
  -webkit-animation: slide-down-in 1s, fade-in 1s;
  animation: slide-down-in 1s, fade-in 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.footer .code img {
  width: 1.85rem;
  height: 1.85rem;
}

.footer .code div {
  margin-left: 0.52rem;
}

.footer .code div p {
  font-size: 0.3rem;
  font-weight: 400;
  color: #000;
  line-height: 0.46rem;
}

.footer .code div h1 {
  font-size: 0.36rem;
  font-weight: 700;
  color: #000;
  line-height: 0.46rem;
}

.footer .copy {
  padding-left: 0.6rem;
  font-weight: 400;
  color: #999;
  line-height: 0.36rem;
  font-size: 0.24rem;
  opacity: 0;
  -webkit-animation: slide-down-in 1s, fade-in 1s;
  animation: slide-down-in 1s, fade-in 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.footer .copy a {
  color: #999;
  text-decoration: none;
}

.footer .copy .jszc {
  pointer-events: none;
}

.footer .copy span a {
  color: #999;
  line-height: 0.36rem;
  font-size: 0.24rem;
  text-decoration: none;
}

.footer .tab-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 0.98rem;
  width: 7.5rem;
  background: #f4f4f4;
  display: flex;
  font-size: 0.24rem;
  font-weight: 400;
  color: #000;
  z-index: 998;
}

.footer .tab-bar img {
  width: 0.26rem;
  margin-right: 0.09rem;
}

.footer .tab-bar > div {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}

.footer .tab-bar > div:first-child {
  width: 2.43rem;
}

.footer .tab-bar > div:nth-child(2) {
  flex: 1;
}

.footer .tab-bar > div:nth-child(3) {
  width: 2.65rem;
}

.footer .tab-bar > div div {
  display: flex;
  align-items: center;
}

.footer .tab-bar > div.active:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1.36rem;
  height: 0.04rem;
  background: #dd292c;
  border-radius: 0.1rem 0.1rem 0 0;
}

</style>
